// labels & badges
// --------------------------------------------------


@label-pending:@brand-info;
@label-active:@brand-success;
@label-suspended:@brand-warning;
@label-terminated :@brand-danger;
@label-cancelled:#BFBFBF;
@label-expired:@gray-light;
@label-fraud:@gray-darker;
@label-unpaid:@brand-danger;
@label-paid:@brand-success;
@label-refunded:@gray-light;
@label-collections:@brand-warning;


.label {
 border-radius:0;
 text-shadow:none;
 font-weight:normal;

 display:inline-block;

 background-color:@label-default !important;

 &[class*="col-"][class*="arrow"] {
	min-height:0;
 }
}


@media screen and (-webkit-min-device-pixel-ratio:0) { 
	//default display:none causes problems with Android Webview
	::safari-only,.label:empty {
		display: inline-block;
	}
	::safari-only,.badge:empty {
		display: inline-block;
	}
}




.badge {
	text-shadow:none;
	font-size:@baseFontSize - 2;
	padding: 3px 6px 3px 6px;
	font-weight:normal;
	background-color:@label-default !important;
	-webkit-border-radius: 12px !important;
	-moz-border-radius: 12px !important;
	border-radius: 12px !important;
	text-shadow:none !important;
 
 &.no-radius { border-radius:0; }
}
.label-transparent, .badge-transparent {
	background-color:transparent !important;
}



//labels
.label-color(@color) {
  @label-class:~`"label-@{color}"`;
  @badge-class:~`"badge-@{color}"`;
  @label-color:@@label-class;

 .@{label-class}, .@{badge-class} {
	background-color:@label-color !important;
 }  
}

.label-arrow(@color) {
   @label-class:~`"label-@{color}"`;
   @label-color:@@label-class;

  .@{label-class}{
	&.arrowed:before {
		border-right-color:@label-color;
	}
	&.arrowed-in:before {
		border-color:@label-color;
	}
	&.arrowed-right:after {
		border-left-color:@label-color;
	}
	&.arrowed-in-right:after {
		border-color:@label-color;
	}
  }
}
.label-color(~"info");
.label-color(~"primary");
.label-color(~"success");
.label-color(~"danger");
.label-color(~"inverse");
.label-color(~"warning");
.label-color(~"light");

.label-color(~"pending");
.label-color(~"active");
.label-color(~"suspended");
.label-color(~"paid");
.label-color(~"unpaid");
.label-color(~"terminated");
.label-color(~"cancelled");
.label-color(~"expired");
.label-color(~"refunded");
.label-color(~"collections");
.label-color(~"fraud");


.badge-light, .label-light {
	color:@gray-light !important;
}




.label.arrowed , .label.arrowed-in {
 position:relative;
 z-index: 1;
 &:before {
	display:inline-block;
	content:"";
	position:absolute;
	top:0;
	z-index: -1;
	
	border:1px solid transparent;

	border-right-color:@label-default;
 }
}
.label.arrowed-in:before {
	border-color:@label-default;
	border-left-color:transparent !important;
}


.label.arrowed-right , .label.arrowed-in-right {
 position:relative;
 z-index: 1;
 &:after {
	display:inline-block;
	content:"";
	position:absolute;
	top:0;
	z-index: -1;
	
	border:1px solid transparent;

	border-left-color:@label-default;
 }
}
.label.arrowed-in-right:after {
	border-color:@label-default;
	border-right-color:transparent !important;
}



.label-arrow(~"info");
.label-arrow(~"primary");
.label-arrow(~"success");
.label-arrow(~"warning");
.label-arrow(~"danger");
.label-arrow(~"inverse");
.label-arrow(~"light");


.label-arrow(~"pending");
.label-arrow(~"active");
.label-arrow(~"suspended");
.label-arrow(~"paid");
.label-arrow(~"unpaid");
.label-arrow(~"terminated");
.label-arrow(~"cancelled");
.label-arrow(~"expired");
.label-arrow(~"refunded");
.label-arrow(~"collections");
.label-arrow(~"fraud");


.label {
 .label-size(12px, 1.2, 20px, 10px, 5px);
}
.label-lg {
  padding:0.3em 0.6em 0.4em;
 .label-size(13px, 1.1, 24px, 12px, 6px);
}
.label-xlg {
  padding:0.3em 0.7em 0.4em;
 .label-size(14px, 1.3, 28px, 14px, 7px);
}
.label-sm {
  padding:0.2em 0.4em 0.3em;
 .label-size(11px, 1.2, 18px, 9px, 4px);
}
.label > span , .label > [class*="fa-"], .label > [class*="glyphicon-"] {
 line-height: 1;
 vertical-align: bottom;
}


.label-size(@font-size, @line-height, @height, @border-height, @border-width) {
  font-size: @font-size;
  line-height: @line-height;
  height: @height;
  
  &.arrowed {
	margin-left: @border-width;
	&:before {
		left: -(@border-width * 2);
		border-width: @border-height @border-width;
	}
  }
  &.arrowed-in {
	margin-left: (@border-width);
	&:before {
		left: -@border-width;
		border-width: @border-height @border-width;
	}
  }

  &.arrowed-right {
	margin-right: @border-width;
	&:after {
		right: -(@border-width * 2);
		border-width: @border-height @border-width;
	}
  }
  &.arrowed-in-right {
	margin-right: (@border-width);
	&:after {
		right: -@border-width;
		border-width: @border-height @border-width;
	}
  }
}